<template>
  <el-container>
    <el-header>
      <div>
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="goBack">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">详情</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-header>
    <el-container>
      <div height="500px" style="margin-top: 10px" width="25%">
        <el-aside>
          <div style="width: 280px; float:left;margin-left: 20px">
            <el-input v-model="name" placeholder="请输入目录搜索" @keyup.enter.native="searchConfirm">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div style="margin-top: 60px; margin-left:20px; height: 450px; width:280px; overflow: auto">
            <el-tree ref="catalogTree"
                     :data=treeData
                     :props="defaultProps"
                     node-key="id"
                     @node-click="handleNodeClick">
            <span slot-scope="{node, data}" class="custom-tree-node">
              <span v-html="node.label"></span>
              <span v-show="data.filtered" style="color: red">*</span>
            </span>
            </el-tree>
          </div>
        </el-aside>
      </div>
      <el-container>
        <el-main
          :style="{backgroundColor : contenteditable ? 'aliceblue' : 'antiquewhite', height: contextHeight + 'px'}"
          style="margin: 10px 20px; ">
          <div id="context" :contenteditable="contenteditable" v-html="bookArticle.unitContent"/>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "GuideBookDetail",
  data() {
    return {
      name: '',
      treeData: [],
      id: '',
      bookArticle: {},
      defaultProps: {
        children: 'children',
        label: 'str'
      },
      contextHeight: 0,
      contenteditable: false,
    }
  },
  methods: {

    switchUnitContent(treeNode) {
      this.contenteditable = false
      this.axios.get("/pmph/action/examBook/selectExamBookArticle", {
        params: {
          bookArticleId: treeNode.bookArticleId
        }
      }).then((response) => {
        this.bookArticle = response.data;
      })
    },
    handleNodeClick: function (treeNode) {
      let idName = '#CHP' + treeNode.sequenceNumber;
      var element = document.querySelector(idName);
      if (element) {
        element.scrollIntoView(true);
        return;
      }
      if (this.contenteditable && this.bookArticle.unitContent !== $("#context").html()) {
        this.$confirm('本次编辑尚未保存, 确认放弃吗？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          this.switchUnitContent(treeNode)
        })
      } else {
        this.switchUnitContent(treeNode)
      }
    },
    searchConfirm() {
      // 先关闭所有展开节点
      for (let nodeId in this.$refs.catalogTree.store.nodesMap) {
        let treeNode = this.$refs.catalogTree.store.nodesMap[nodeId]
        this.$set(treeNode.data, 'filtered', false)
        treeNode.expanded = false
      }
      // 如果有关键字, 递归展开搜索到的节点
      if (this.name) {
        for (let cntNodeId in this.$refs.catalogTree.store.nodesMap) {
          let cntTreeNode = this.$refs.catalogTree.store.nodesMap[cntNodeId]
          if (cntTreeNode.label.includes(this.name)) {
            this.$set(cntTreeNode.data, 'filtered', true)
            this.recursiveExpandParentNode(cntTreeNode)
          }
        }
      }
    },
    recursiveExpandParentNode(treeNode) {
      if (treeNode.parent) {
        treeNode = treeNode.parent
        treeNode.expanded = true
        this.recursiveExpandParentNode(treeNode)
      }
    },
    goBack: function () {
      this.$router.push("/guideBookTable")
    },
  },
  created() {
    this.contextHeight = CONST.WORKSPACE_HEIGHT - 130
    this.axios.get("/pmph/action/examBook/selectExamBookTree", {
      params: {
        bookId: this.$route.query.id
      }
    }).then((response) => {
      this.treeData = response.data
      this.switchUnitContent(this.treeData[0])
    })
  }
}
</script>

<style scoped>
.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: hidden;
  noresize: "false";

}
</style>
